<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    window.onload=function (){
      let oUser=document.getElementById('user');
      let oPass=document.getElementById('pass');
      let oF=document.getElementById('f1');
      let oBtn=document.getElementById('btn1');

      oBtn.onclick=function (){
        let url = `http://localhost:8080/api`;
        let option = {
          method: 'POST',
          body: {
            user: oUser.value,
            pass: oPass.value
          }
        }
        fetch(url,option).then(res => {
          console.log(res.text())
        })

        // let data=new FormData();

        // data.set('user', oUser.value);
        // data.set('pass', oPass.value);

        // Array.from(oF.files).forEach(file=>{
        //   data.append('f1', file);
        // });

        // //
        // let oAjax=new XMLHttpRequest();

        // //POST
        // oAjax.open('POST', `http://localhost:8080/api`, true);
        // oAjax.send(data);

        // oAjax.onreadystatechange=function (){
        //   if(oAjax.readyState==4){
        //     if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
        //       alert('成功');
        //     }else{
        //       alert('失败');
        //     }
        //   }
        // };
      };
    };
    </script>
  </head>
  <body>
    用户：<input type="text" id="user" /><br>
    密码：<input type="password" id="pass" /><br>
    头像：<input type="file" id="f1" multiple /><br>
    <input type="button" value="提交" id="btn1">
  </body>
</html>
